<style type="text/css">
    @import "/static/css/ContactAdd.css";
    .action .btn.del{
        background: red;
        margin-top: 3vh;
    }
    
</style>

<!-- 头部 -->
<header>
    <div class="left">
        <a href="javascript:history.back(-1)">
            <span class="glyphicon glyphicon-menu-left back" aria-hidden="true"></span>
            <span>返回</span>
        </a>
    </div>
    <div class="center">
        信息录入
    </div>
    <div class="right"></div>
</header>
<!-- 信息录入 -->
<div class="info">
    <h3 class="title wow fadeInUp">信息录入</h3>

    <p class="desc wow fadeInUp" data-wow-delay="200ms">
        您可在本页录入您的联系信息，录入成功后名片将会出现在首页。如需修改首页名片信息，也请新建录入，将会自动替换原有名片。
    </p>
</div>

<form class="contact wow fadeInUp" data-wow-delay="300ms" method="post" action="{:url('contact/edit')}">
    <!-- id的隐藏域 -->
    <input type="hidden" name="conid" value="{$Contact['id']}">
    <div class="form-group">
        <label for="nickname">姓名</label>
        <input type="text" class="form-control" id="nickname" name="nickname" value="{$Contact['nickname']}" placeholder="请输入姓名" required />
    </div>

    <div class="form-group">
        <label for="phone">手机</label>
        <input type="text" class="form-control" id="phone" name="phone" value="{$Contact['phone']}" placeholder="请输入手机" required />
        <span id="phone-msg"></span>
    </div>

    <div class="form-group">
        <label for="gender">性别</label>
        <select class="form-control" name="gender">
            <option value="0" {$Contact['gender'] == 0 ? 'selected' : ''}>保密</option>
            <option value="1" {$Contact['gender'] == 1 ? 'selected' : ''}>男</option>
            <option value="2" {$Contact['gender'] == 2 ? 'selected' : ''}>女</option>
        </select>
    </div>

    <div class="form-group">
        <label for="province">省份</label>
        <select class="form-control" id="province" name="province">
            <option>请选择</option>
            {foreach $provinces as $item}
                <option value="{$item.code}" {$item.code == $Contact['province'] ? 'selected':''}>{$item.name}</option>
            {/foreach}
        </select>
    </div>

    <div class="form-group">
        <label for="city">市</label>
        <select class="form-control" id="city" name="city">
            <option>请选择</option>
            {foreach $citys as $item}
                <option value="{$item.code}" {$item.code == $Contact['city'] ? 'selected':''}>{$item.name}</option>
            {/foreach}
        </select>
    </div>

    <div class="form-group">
        <label for="district">区</label>
        <select class="form-control" id="district" name="district">
            <option>请选择</option>
            {foreach $districts as $item}
                <option value="{$item.code}" {$item.code == $Contact['district'] ? 'selected':''}>{$item.name}</option>
            {/foreach}
        </select>
    </div>

    <div class="form-group">
        <label for="type">分类</label>
        <select class="form-control" name="typeid">
            <option>请选择</option>
            {foreach $TypeList as $item}
                <option value="{$item.id}" {$item.id == $Contact['typeid'] ? 'selected' : ''}>{$item.name}</option>
            {/foreach}
        </select>
    </div>

    <div class="form-group">
        <label for="remark">备注</label>
        <input type="text" class="form-control" id="remark" name="remark" value="{$Contact['remark']}" placeholder="请输入备注" />
    </div>
    
    <div class="action">
        <button class="btn">提交</button>
        <button class="btn del" data-id="{$Contact['id']}">删除</button>
    </div>
    
</form>


<script>
    $(document).ready(function(){

        // 选择省份
        $('#province').change(function(){
            var code = $(this).val();
            $.ajax({
                url:`{:url('contact/area')}`,
                type:'POST',
                data:{
                    code:code,
                    action:'province'
                },
                dataType:'json',
                success:function(res)
                {
                    if(res.code === 0)
                    {
                        layer.msg(res.msg,{icon:5});
                        return false;
                    }

                    // 定义空的字符串
                    var CityOption = '';
                    var DistrictOption = '';

                    for(let item of res.data.CityList)
                    {
                        CityOption += `<option value="${item.code}">${item.name}</option>`
                    }

                    for(let item of res.data.DistrictList)
                    {
                        DistrictOption += `<option value="${item.code}">${item.name}</option>`
                    }

                    // 清空原来的数据
                    $('#city').html('');
                    $('#district').html('');

                    // 重新赋值
                    $('#city').html(CityOption);
                    $('#district').html(DistrictOption);

                }
            })
        })

        // 选择市
        $('#city').change(function()
        {
            var code = $(this).val();
            $.ajax({
                url:`{:url('contact/area')}`,
                type:'POST',
                data:{
                    code:code,
                },
                dataType:'json',
                success:function(res)
                {
                    if(res.code === 0)
                    {
                        layer.msg(res.msg,{icon:5});
                        return false;
                    }

                    // 定义一个空的字符串
                    var option = '';

                    for(let item of res.data)
                    {
                        option += `<option value="${item.code}">${item.name}</option>`
                    }

                    // 清空原来的数据
                    $('#district').html('');

                    // 重新赋值
                    $('#district').html(option);
                }
            })
        })

        // 查询手机号是否存在
        $('#phone').change(function(){
            // 获取手机号
            var phone = $(this).val();
            
            $.ajax({
                type:'post',
                url:`{:url('contact/phone')}`,
                data:{
                    phone:phone
                },
                dataType:'json',
                success:function(res)
                {
                    if(res.code === 1)
                    {
                        $('#phone').css({
                            borderColor:'green',
                            boxShadow: 'inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px rgb(102 233 131 / 60%)'
                        })

                        $('#phone-msg').html(res.msg).css({
                            display: 'block',
                            marginTop: '10px',
                            color: 'green',
                        })
                    }else{
                        $('#phone').css({
                            borderColor:'#ff0000',
                            boxShadow: 'inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px rgb(233 102 102 / 60%)'
                        })

                        $('#phone-msg').html(res.msg).css({
                            display: 'block',
                            marginTop: '10px',
                            color: 'red',
                        })
                    }
                }
            })
        
        })

        // 删除
        $('.del').click(function()
        {
            layer.confirm('确认删除该联系人？',{
                title:'是否删除',
                icon:3,
            },(index) => {
                let id = $(this).data('id')

                $.ajax({
                    type:'post',
                    url:`{:url('Contact/del')}`,
                    data:{
                        id:id
                    },
                    dataType:'json',
                    success:(res) =>
                    {
                        if(res.code === 1)
                        {
                            layer.msg(res.msg,() => {
                                location.href = `{:url('index/index')}`
                            })
                            return false
                        }else{
                            layer.msg(res.msg)
                            return false
                        }
                    }
                })

                // 关闭弹出层
                layer.close(index)
                return false
            })
            return false
        })
        
    })

    
</script>